<template>
  <el-card shadow="always" :body-style="{ padding: '20px' }" style="margin-top: 20px">
    <div slot="header" class="header">
      <el-tabs class="demo-tabs" v-model="activeName">
        <el-tab-pane label="销售额" name="sale"></el-tab-pane>
        <el-tab-pane label="访问量" name="visite"></el-tab-pane>
      </el-tabs>
      <!--右侧结构-->
      <div class="right">
        <span @click="dayClk">今日</span>
        <span @click="monthClk">本周</span>
        <span @click="startOfClik">本月</span>
        <span @click="yearClik">今年</span>
        <!--日历-->
        <el-date-picker v-model="timeArr" type="daterange" range-separator="-" start-placeholder="入住时间"
          end-placeholder="离开时间" size="small" />
      </div>
    </div>

    <el-row :gutter="20">
      <el-col :span="18" :offset="0">
        <v-chart :option="columnTion()" style="height: 400px"></v-chart>
      </el-col>
      <el-col :span="6" :offset="0">
        <h6>门店{{ activeName == "sale" ? "销售额" : "访问量" }}排名</h6>
        <ul v-show="activeName == 'sale'">
          <li v-for="(item, index) in arr" :key="index">
            <span :class="{ active: index < 3 }">{{ item.no }}</span>
            <span>{{ item.name }}</span>
            <span>{{ item.count }}</span>
          </li>
        </ul>
        <ul v-show="activeName != 'sale'">
          <li v-for="(item, index) in arr1" :key="index">
            <span :class="{ active: index < 3 }">{{ item.no }}</span>
            <span>{{ item.name }}</span>
            <span>{{ item.count }}</span>
          </li>
        </ul>

      </el-col>
    </el-row>


  </el-card>
</template>
 
<script setup lang="ts">
import { ref } from "vue";
import dayjs from 'dayjs';
//收集选项卡的数据
let activeName = ref("sale");


const columnTion = () => {
  return {
    //标题
    title: {
      text: activeName.value == "sale" ? "销售额" : "访问量",
    },
    //提示组件
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    grid: {
      left: "0",
      right: "0",
      bottom: "0",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        data: props.x,
        axisTick: {
          alignWithLabel: true,
        },
      },
    ],
    yAxis: [
      {
        //y轴线展示
        axisLine: {
          show: true,
        },
        //y轴的刻度

        axisTick: {
          show: true,
        },
      },
    ],
    series: [
      {
        name: "Direct",
        type: "bar",
        barWidth: "60%",
        data: activeName.value == "sale" ? props.saleArr : props.visiteArr,
        //柱条的颜色调试
        itemStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "red", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "blue", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
        //展示数值
        label: {
          show: true,
          //文本位置
          position: "top",
          //旋转
          rotate: 20,
          color: "yellowgreen",
        },
      },
    ],
  };
}


let timeArr = ref<any>([])
// 本日
const dayClk = () => {
  let staor = dayjs().format("YYYY-MM-DD")
  let end = dayjs().format("YYYY-MM-DD")
  timeArr.value = [staor, end]
}
//本周
const monthClk = () => {
  let staor = dayjs().day(1).format("YYYY-MM-DD")
  let end = dayjs().day(7).format("YYYY-MM-DD")
  timeArr.value = [staor, end]
}
//本月
const startOfClik = () => {
  let staor = dayjs().startOf('month').format("YYYY-MM-DD")
  let end = dayjs().endOf('month').format("YYYY-MM-DD")
  timeArr.value = [staor, end]
}
//本年
const yearClik = () => {
  let staor = dayjs().startOf('year').format("YYYY-MM-DD")
  let end = dayjs().endOf('year').format("YYYY-MM-DD")
  timeArr.value = [staor, end]
}

let props = defineProps(["saleArr", "visiteArr", "x", "arr", "arr1"]);
</script>

<style scoped>
.header {
  position: relative;
}

.right {
  position: absolute;
  right: 0;
  top: 10px;
}

.right span {
  margin: 0px 5px;
}

.column {
  height: 270px;
  border: 1px solid #ccc;
}

ul {
  list-style: none;
}

/**今晚把flex布局看看**/
li {
  font-size: 12px;
  margin-top: 30px;
  display: flex;
  /**水平轴对齐方式**/
  justify-content: space-between;
}

li span:nth-child(1) {
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
}

li span.active {
  border-radius: 50%;
  background: black;
  color: white;
}
</style>